<template>
	<div class="home">
		<TopBar />
		<MetaverseVue />
		<ProductService />
		<DataMethod />
    <NewsContent />
    <div class="custom">
			<div class="text">
				<h1 class="title">合作伙伴{{ category }}</h1>
				<div class="content">他们都选择了耀琰科技</div>
			</div>
			<div class="custom_list">
				<div class="list_box">
					<i class="el-icon-edit"></i>
					<div class="list_name">东华软件</div>
				</div>
				<div class="list_box">
					<i class="el-icon-edit"></i>
					<div class="list_name">东华软件</div>
				</div>
				<div class="list_box">
					<i class="el-icon-edit"></i>
					<div class="list_name">东华软件</div>
				</div>
				<div class="list_box">
					<i class="el-icon-edit"></i>
					<div class="list_name">东华软件</div>
				</div>
				<div class="list_box">
					<i class="el-icon-edit"></i>
					<div class="list_name">东华软件</div>
				</div>
				<div class="list_box">
					<i class="el-icon-edit"></i>
					<div class="list_name">东华软件</div>
				</div>
			</div>
		</div>
		<FootBar />
	</div>
</template>

<script lang="ts" setup>
	import TopBar from "@/components/TopBar.vue";
	import MetaverseVue from "@/components/MetaverseVue.vue";
	import ProductService from "@/components/ProductService.vue";
	import DataMethod from "@/components/DataMethod.vue";
  import NewsContent from "@/components/NewsContent.vue";
  import FootBar from "@/components/FootBar.vue";
  import {getCategory} from '@/api/index';
  import {ref, onMounted} from "vue";

  let category = ref('');
  onMounted(() => {
		// 获取分类
		getCategory({page:1,size:10}).then((res) => {
			console.log(res,'res.');
			category.value = res;
		})
  })

</script>
<style lang="scss">
	.home {
		height: 100vh;
	}
	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 150px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n + 1) {
		background-color: #d3dce6;
	}
	.custom {
		height: 60vh;
		background: #ffffff;
		flex-direction: column;
		display: flex;
		// justify-content: center;
		align-items: center;
		> .text {
			display: flex;
			flex-direction: column;
			align-items: center;
			> .title {
				margin-top: 150px;
			}
			> .content {
				margin: 30px 0px;
			}
		}
		> .custom_list {
			display: flex;
			width: 1520px;
			margin-top: 50px;
			align-items: center;
			> .list_box {
				display: flex;
				margin: 20px;
				> .list_name {
					margin-left: 10px;
				}
			}
		}
	}
</style>
